﻿<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>预订</title>
<meta name="decorator" content="default" />
<meta name="viewport"
	content="width=device-width initial-scale=1.0  maximum-scale=1.0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="format-detection" content="telephone=no">
<link href="${ctxStatic}/mobile-template/sun/css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

/**
 * 留言并预定
 **/
function showGuestBook(orderId,timeId){
	
	var uid = '${uid}';
	var wid = '${wechatId}';
	
	var message = $('#message_'+orderId).val();
	alert("HOW..."+orderId+"==="+orderId+"留言内容："+message);
	var params = {'uid':uid,'wechatId':wid,'message':message,'boid':orderId };
	$.post('${ctxFront}/wechat/book/bookOrder/doNotimebook',params,function(data){
		if(data.result == 'ok'){
			alert('您的预订信息已成功发送,我们的服务人员稍后会联系您，谢谢!');
			$('#btn_'+orderId).attr("disabled","disabled");
		}else{
			alert("很抱歉，未能成功预订，请联系我们的服务人员.谢谢！");
		}
	},'json');
	
}
</script>


</head>
<body>
<div class="warp">
<!--头部 begin-->
<header>
<h1>微信预订服务</h1>
</header>
<!--头部 end-->



<!--section begin-->
<section class="sec_box_1">
 <ul class="ull_style_1">
 	<c:forEach items="${bookOrderList }" varStatus="s" var="bookOrder">
	  <li><span class="number">${s.index +1 }</span><a href="#">${bookOrder.name } </a>
	  		<button type="button"  id="btn_${bookOrder.id }"   class="bt_style_1"  data-toggle="modal" data-target="#myModal_${bookOrder.id }">预定</button>
	  		
	  		<div id="myModal_${bookOrder.id }" class="modal hide fade" tabindex="-1" style="width:300px"
									role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
										<h3 id="myModalLabel">预订-${bookOrder.name} </h3>
									</div>
									<div class="modal-body">
										请说明您所预订的时间和人数:<br>
										<textarea name="reply" id="message_${bookOrder.id }" rows="5" cols="20"></textarea>
									</div>
									<div class="modal-footer">
										<button class="bt_style_1" data-dismiss="modal" aria-hidden="true">关闭</button>
										<button class="bt_style_1"  data-dismiss="modal" aria-hidden="true" onclick="showGuestBook('${bookOrder.id}');">提交</button>
									</div>
			</div> <!-- 回复内容 结束-->
	  		
	  	<%
	  		/****
	  		//子页面时间选择
		  	<c:if test="${bookOrder.timeFlag eq '1' }">
			  	<a href="${ctxFront }/wechat/book/bookOrder/bookItems?boid=${bookOrder.id }&wechatId=${wechatId}&uid=${uid}" class="i_style_1">预定</a>
		  	</c:if>
	  		
	  		*****/
	  	%>
	  	
	  </li>
 	</c:forEach>
 
 </ul>
</section>
<!--section end-->



</div>
</body>
</html>